import {lenthify as cssLength} from '../../utils/css'

class Logo {
  constructor (player) {
    this.player = player

    this.setLogo()
  }

  setLogo () {
    const {logo} = this.player._config
    const {logo: dom} = this.player.dom
    if (!logo.file) {
      return
    }
    this.resetPosition()
    dom.style.backgroundImage = `url(${logo.file})`
    dom.style.width = cssLength(logo.width)
    dom.style.height = cssLength(logo.height)
    if (logo.position !== 'control-bar') {
      const direcs = logo.position.split('-')
      direcs.forEach(direc => {
        if (direc === 'top' || direc === 'bottom') {
          dom.style[direc] = cssLength(logo.marginh)
        }
        if (direc === 'left' || direc === 'right') {
          dom.style[direc] = cssLength(logo.marginw)
        }
      })
      dom.style.backgroundPosition = direcs.join(' ')
    }
  }

  resetPosition () {
    const {logo: dom} = this.player.dom
    dom.style.left = 'auto'
    dom.style.top = 'auto'
    dom.style.right = 'auto'
    dom.style.bottom = 'auto'
  }

  resizeLogo () {}
}

export default Logo
